<template>
  <div class="container">
    <div class="title g-flex-sb">
      <span>交接班小票显示配置</span>
      <el-button type="primary" size="small" @click="modify">修改配置</el-button>
    </div>
    <div class="card">
      <template v-if="showTableData.length > 0">
        <div v-for="(item, index) in showTableData" :key="index" class="card-contnet">
          <span class="box-title">{{item.name}}</span>
          <span class="box-content">显示</span>
        </div>
      </template>
      <template v-else><span class="noData g-flex-c">暂无显示</span></template>
    </div>
    <el-dialog
      title="小票显示配置"
      :visible.sync="centerDialogVisible"
      width="50%"
      @close="close"
      center>
      <div>
        <span class="oil-title">加油汇总信息配置：</span>
        <div class="oilSetList">
          <div v-for="item in refuelingSummary" :key="item.id" @click="handleClick(item, refuelingSummary)">
            <span>{{item.name}}</span>
            <span class="select"><img v-show="item.show === 1" src="https://web.newlink.com/ty/merchant/merchantCenter/icon-label.png" class="img"/></span>
          </div>
        </div>
      </div>
      <div>
        <span class="oil-title">列表汇总信息配置</span>
        <div class="oilSetList">
          <div v-for="item in listSummary" :key="item.id" @click="handleClick(item, listSummary)">
            <span>{{item.name}}</span>
            <span class="select"><img v-show="item.show === 1" src="https://web.newlink.com/ty/merchant/merchantCenter/icon-label.png" class="img"/></span>
          </div>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button style="width: 120px" size="medium" type="primary" @click="sumbit">保 存</el-button>
        <el-button style="width: 120px" size="medium" @click="cancel">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { showLabel, submitLabel } from '@/api/merchantCenter'
// import _ from 'lodash'
export default {
  data () {
    return {
      id: '',
      tableData:[], // 获取的所有的数据
      showTableData: [], // 过滤不展示不显示的
      refuelingSummary: [], // 加油汇总信息配置
      listSummary: [], // 列表汇总信息配置
      centerDialogVisible: false
    }
  },
  mounted () {
    this.showLabelApi()
  },
  methods: {
    // 点击修改配置按钮
    modify () {
      this.centerDialogVisible = true
    },
    // 数组点击判断是否选中公共方法
    handleClick ({ id }, list) {
      list.forEach((itemId) => { if (itemId.id === id) { itemId.show === 1 ? itemId.show = 0 : itemId.show = 1 } })  // 改变状态
    },
    // 提交
    sumbit () {
      const commonList = [...this.refuelingSummary, ...this.listSummary]
      let params = []
      commonList.filter(item => item.show === 1).map(item => { params.push(item.id) })
      params = params.length > 0 ? params.join(',') : ""
      this.submitLabelApi(params)
      this.centerDialogVisible = false
    },
    // 取消
    cancel () {
      this.centerDialogVisible = false
      // this.showLabelApi()
    },
    // 关闭回调
    close () {
      this.showLabelApi()
    },
    // 获取label信息
    async showLabelApi () {
      try {
        const { code, result } = await showLabel()
        if (code !== 200) return
        const { refuelingSummary, listSummary, id } = result
        this.id = id
        this.refuelingSummary = refuelingSummary
        this.listSummary = listSummary
        this.tableData = [...this.refuelingSummary, ...this.listSummary]
        this.showTableData = this.tableData.filter(item => item.show === 1) // 只展示显示的
      } catch (e) {
        console.log(e)
      }
    },
    // 提交选中的label信息
    async submitLabelApi (params) {
      try {
        const { code } = await submitLabel({ dutyConfig: params, id: this.id })
        if (code !== 200) return
        this.showLabelApi()
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>
<style scoped lang="less">
.container{
  height: 800px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background: #fff;
  padding: 30px 0;
}
.title{
  width: 95%;
}
.noData{
  width: 100%;
  height: 100%;
}
.card{
  width: 95%;
  overflow: auto;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  bordeR:1px solid #EBEEF5;
  .card-contnet{
    height: 100%;
    display: flex;
    flex:1;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
  .box-title{
    display: block;
    width: 100%;
    min-width: 130px;
    padding: 0 10px;
    text-align: center;
    line-height: 40px;
    border:1px solid #EBEEF5;
    background: #F5F7FA;
    font-size: 16px;
    color: #222222;
  }
  .box-content{
    display: block;
    width: 100%;
    height: 40px;
    text-align: center;
    line-height: 40px;
    border:1px solid #EBEEF5;
    font-size: 16px;
    color: #222222;
  }
}
.oil-title{
  font-weight: 600;
  margin-left: 20px;
}
.oilSetList{
  width:100%;
  padding: 10px 10px 40px 10px;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  &:after{
    content: "";
		flex: auto;
  }
  >div{
    width: 18%;
    position: relative;
    min-width: 120px;
    margin: 10px 0px 0px 10px;
    border-radius: 4px;
    text-align: center;
    padding: 10px;
    border:1px solid #ccc;
    cursor: pointer;
    .select{
      width: 18px;
      height: 18px;
      position: absolute;
      top: 0px;
      right: 0px;
      .img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>